
function renderStudent() {
    axios.get('/student/list').then(({data:res}) => {
        console.log(res.data);
        document.querySelector('tbody').innerHTML=''
       document.querySelector('tbody').innerHTML = res.data.reduce((prev,item) => {
          return  prev += `
            <tr>
        <th scope="row">${item.id}</th>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.sex}</td>
        <td>${item.group}</td>
        <td>${item.phone}</td>
        <td>${item.salary}</td>
        <td>${item.truesalary}</td>
        <td>${item.county}</td>
        <td>
          <button type="button" class="btn btn-primary btn-sm" data-id='${item.id}'>修改</button>
          <button type="button" class="btn btn-danger btn-sm" data-id='${item.id}'>删除</button>
        </td>
      </tr>
            `
       }, '')
       
    })
  // resetui()
    
}
renderStudent() 
//  删除
document.querySelector('tbody').addEventListener('click', function (e) {
    // 事件源判断
    if (e.target.tagName === 'BUTTON' && e.target.textContent === '删除') {
        // console.log(e.target.dataset.id);
        const flag = window.confirm('你确定删除吗？')

        if (flag) {
          axios.delete('/student/delete', {
            params: {
            id:`${e.target.dataset.id}`
        }}).then(({data:res}) => {
            console.log(res);
            if (res.code === 0) {
                return renderStudent()
            }
        }
            
        )
        } else {
            return
      }
    }
    // 代码优化
  
  
  // 修改数据值选择数据
  if (e.target.tagName === 'BUTTON' && e.target.textContent === '修改') {
    axios.get('/student/one', { params: { id: e.target.dataset.id } }).then(({ data: res }) => {
      const { code, data, message } = res
      // 不能解析对象，还是不能解析多元对象，还需要测试，难道真的只剩下最后的哪一个笨方法了吗??循环都不好使，循环肯定好使，但是不好用
      // console.log(data);
      const updateModal = document.querySelector('#updateModal')
   

      // 应该直接发送ajax 请求 再 遍历
      axios.get('/geo/city', { params: { pname: data.province } }).then(({ data: res }) => {
        document.querySelector('#updateModal [name=city]').innerHTML = res.reduce((prev, item) => prev += `
        <option selected value="${item}">${item}</option>
        `, '')
              // 区的ajax请求
       axios.get('/geo/county', { params: { cname:data.city, pname:data.province } } ).then(({data:res}) => {
       document.querySelector('#updateModal [name=county]').innerHTML = res.reduce((prev, item) => prev += `
        <option selected value="${item}">${item}</option>
       `, '')
        for (let k in data) {
        // console.log(k);
        updateModal.querySelector(`[name=${k}]`) && (updateModal.querySelector(`[name=${k}]`).value = data[k])
        // 可选链操作只能作为被选者,括号为逻辑中断打开新世界的大门
        // 今天最大的收获还是这段代码，解决多余的筛选问题，极大的简化了代码，看到逻辑中断后面跟了赋值的，一定有括号
        // 回调函数好像可以实现省市区链三级联动  嘎嘎嘎
          // 区块链，一层一层的筛选，然后再监听两个change事件
      }
         
      })
        
      })     
      $('#updateModal').modal('show')
    })
    
    // $('#updateModal').modal('show')  这个是弹出表单
     
  }
})

  //  修改数据之提交数据
document.querySelector('#updateModal form').addEventListener('submit', function (e) {
  e.preventDefault()
  let changeInfo = new FormData(this)
        changeInfo = [...changeInfo]
  let  changeStudent=''
  // 数据处理
  changeInfo.forEach(item => changeStudent+=`&${item[0]}=${item[1]}`)
  changeStudent = changeStudent.substring(1)
  console.log(changeStudent);
  axios.put('/student/update',changeStudent).then(({ data: res }) => {
    console.log(res);
    res.code || renderStudent()
   
    document.querySelector('#updateModal .btn-close').click()
    
  }) 

  })

// 省市区三级联动 修改表单的


axios.get('/geo/province').then(({data:res}) => {
  // console.log(res);
  document.querySelector('#updateModal [name=province]').innerHTML = res.reduce((prev, item) => prev += `
  <option selected value="${item}">${item}</option>
  `, '')

})
// 直接获取省份信息

document.querySelector('#updateModal [name=province]').addEventListener('change', function () {
  // console.log(this.value);
  if (!this.value) return
  axios.get('/geo/city', { params: { pname:this.value } } ).then(({data:res}) => {
    document.querySelector('#updateModal [name=city]').innerHTML = res.reduce((prev, item) => prev += `
  <option selected value="${item}">${item}</option>
  `, '')
   })
})
// 获取市区信息
 document.querySelector('#updateModal [name=city]').addEventListener('change', function () {
  // console.log(this.value);
   const province=document.querySelector('#updateModal [name=province]').value
  axios.get('/geo/county', { params: { cname:this.value, pname:province } } ).then(({data:res}) => {
    document.querySelector('#updateModal [name=county]').innerHTML = res.reduce((prev, item) => prev += `
  <option selected value="${item}">${item}</option>
  `, '')
   })
 })




// 获取省份信息
axios.get('/geo/province').then(({data:res}) => {
  // console.log(res);
  document.querySelector('#addModal [name=province]').innerHTML = res.reduce((prev, item) => prev += `
  <option selected value="${item}">${item}</option>
  `, '')

})
// 直接获取省份信息

document.querySelector('#addModal [name=province]').addEventListener('change', function () {
  // console.log(this.value);
  if (!this.value) return
  axios.get('/geo/city', { params: { pname:this.value } } ).then(({data:res}) => {
    document.querySelector('#addModal [name=city]').innerHTML = res.reduce((prev, item) => prev += `
  <option selected value="${item}">${item}</option>
  `, '')
   })
})
// 获取市区信息
 document.querySelector('#addModal [name=city]').addEventListener('change', function () {
  // console.log(this.value);
   const province=document.querySelector('#addModal [name=province]').value
  axios.get('/geo/county', { params: { cname:this.value, pname:province } } ).then(({data:res}) => {
    document.querySelector('#addModal [name=county]').innerHTML = res.reduce((prev, item) => prev += `
  <option selected value="${item}">${item}</option>
  `, '')
   })
 })
//  
//  取出表单数据
document.querySelector('.modal-body .add-form').addEventListener('submit', function (e) {
  e.preventDefault()
  const add = new FormData(this)
  const arr = [...add]
  let strStudent=''
  // 数据处理
  arr.forEach(item => strStudent+=`&${item[0]}=${item[1]}`)
  strStudent=strStudent.substring(1)
  axios.post('/student/add', strStudent).then(({ data: res }) => {
    res.code || renderStudent()
    toastr.success(res.message)
    document.querySelector('#addModal .btn-close').click()
    
  })
})
